<template>
	<view class="">
		<view class="title-box"><sun-tietleBox :tietleData="'商品明细共' + (resData.shopLen || 0) + '条'" :showLine="false"></sun-tietleBox></view>
		<view :id="idTopHeight" class="table-box f-column" :style="{ padding: 0 + ' ' + tableMargin + 'rpx' }">
			<!-- 撑满屏幕 -->
			<!-- :height="topHeight - (tableMargin * 2) +'rpx'" -->
			<wyb-table
				ref="table"
				:width="'710rpx'"
				:defaultColWidth="defaultColWidth"
				:headers="headers"
				:contents="resData.shop"
				:header-bg-color="'#128A80'"
				:header-ft-color="'#ffffff'"
				:loading="false"
				:first-line-fixed="false"
				:maxHeight="topHeight - tableMargin * 2 + 'rpx'"
				:min-height="[65, 50]"
			/>
			<view class="toastTitle">{{ query.toastTitle }}</view>
		</view>
	</view>
</template>

<script>
import sunTietleBox from '@/components/sun-titleBox/sun-tietleBox.vue';
import wybTable from '@/components/wyb-table/wyb-table.vue';
export default {
	components: {
		wybTable,
		sunTietleBox
	},
	data() {
		return {
			//表格高度变量
			idTopHeight: 'table-box',
			tableMargin: 20,
			topHeight: 100,
			//平分表宽
			defaultColWidth: 167,

			optionLoad: {},
			query: {
				toastTitle:'',
				sheet_no: '' ,//是 varchar(4) 单据编号
				//yc_type  :''  // varchar(20) 异常类型id 传-1时表示这单的全部详情。最好还是传一下是什么类型传过来的，否则会出现与点详情前的结果不一样，因为前面列表如果一单有多种操作类型，显示是分开的
			},
			headers: [
				{
					label: '商品条码',
					key: 'item_barcode',
					width: 120,
					widthInit: 120
				},
				{
					label: '商品名称',
					key: 'item_name',
					width: 230,
					widthInit: 230
				},
				{
					label: '原价',
					key: 'org_prc'
				},
				{
					label: '新单价',
					key: 'real_amt'
				},
				{
					label: '变动金额',
					key: 'zk_amt'
				}
			],
			resData: {
				list: [],
				shopLen: 0
			}
		};
	},
	onLoad: function(option) {
		this.optionLoad = option;
		this.optionLoad.sheet_no = this.optionLoad.sheet_no || '';
		this.query = { ...this.query, ...this.optionLoad };
		this.$util.getDefaultColWidth(this, 710, 'headers', 'defaultColWidth');
		this.getlogin();
	},
	methods: {
		getlogin() {
			if (!this.query.sheet_no) {
				//uni.navigateBack({});
			} else {
				this.query.sheet_no = this.optionLoad.sheet_no || '';
			}
			let query = this.query;
			this.$api_server.dwzy_GetPosycSheetdetail({
				data: query,
				success: res => {
					if (res.data) {
						//收银合计
						console.log(this.resData)
						this.resData.list = res.data;
						this.resData.shopLen = this.resData.list.length;
						
						this.$util.getTopHeight(this, this.idTopHeight, this.tableMargin);
					}
				},
				fail(error) {
					console.log('rerror>>>', error);
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
@charset "UTF-8";

.title-box {
	margin: 0 20upx;
}
.pay-box {
	margin: 0 20upx;
	border-radius: 10upx;
	padding: 20upx;
	background: rgba(255, 255, 255, 1);
	.pay-item {
		border-bottom: 1px solid rgba(226, 226, 226, 0.8);
		&:last-child {
			border-bottom: 0px;
		}
	}
}
</style>
